<%--
  Created by IntelliJ IDEA.
  User: cwy
  Date: 2020/12/13
  Time: 12:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>验证码页面</title>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/jquery.js"></script>
</head>
<body>
<form action="${pageContext.request.contextPath}/checkCode" method="post">
    请输入验证码：<input type="text" name="code" style="width: 80px;"/>
    <div id=random><img id="imgObj" alt="验证码" src="${pageContext.request.contextPath}/getCode">
    </div>
    <button id="b01" type="button">改变内容</button>
    <br/> <input
        type="submit" value="提交"/>
</form>
</body>
<script type="text/javascript">
    $(function () {
        //response.getWriter().println("验证失败！");
    });

    $("#b01").click(function changeImg() {


        $("#random").html("<img id='imgObj' alt='验证码' src='${pageContext.request.contextPath}/getCode'>")
        var imgSrc = $("#imgObj");
        var src = imgSrc.attr("src");
        imgSrc.attr("src", chgUrl(src));
    });

    // 时间戳
    // 为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
    function chgUrl(url) {
        var timestamp = (new Date()).valueOf();
        url = url.substring(0, 20);
        if ((url.indexOf("&") >= 0)) {
            url = url + "×tamp=" + timestamp;
        } else {
            url = url + "?timestamp=" + timestamp;
        }
        return url;
    }

</script>
</html>
